<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <!--<div style="margin-top:10px">-->
        <!--<el-button icon="el-icon-plus" type="primary" size="mini" @click="mergeData">合并</el-button>-->
        <!--<el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny">删除</el-button>-->
        <!--</div>-->
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="姓名" label-width="70px">
              <el-input v-model="tableSearchParam.employeeName" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号" label-width="70px">
              <el-input v-model="tableSearchParam.telphone" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="审批人" label-width="70px">
              <el-input v-model="tableSearchParam.auditBy" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="审批状态" label-width="70px">
              <el-select v-model="tableSearchParam.auditStatus" placeholder="请选择" style="width:200px" clearable>
                <el-option
                  v-for="item in options"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
              <el-button type="primary" @click="dialogFormVisible = true" icon="el-icon-download" size="small">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <rescuedriveraudittable ref="rescuedriveraudittable"
                                 v-bind:defaultCurrentPage="1"
                                 v-bind:defaultPageSize="10"
                                 v-bind:defaultTableSearchParam="{}"
                                 v-on:total="getTotal"></rescuedriveraudittable>

        <el-dialog title="导出条件" :visible.sync="dialogFormVisible">
          <el-form>
            <el-form-item label="创建时间">
              <el-date-picker
                      v-model="dateRange"
                      @change="handleDateChange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="hideDialog">取 消</el-button>
            <el-button type="primary" @click="exportInfo">确 定</el-button>
          </div>
        </el-dialog>

        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>

  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .m-col {
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-left {
    border: 1px solid #ebeef5;
    border-left: none;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
  }

  .m-col-bottom {
    border: 1px solid #ebeef5;
    border-top:none;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-bottom-left {
    border: 1px solid #ebeef5;
    border-top:none;
    border-left: none;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
  }

</style>

<script>
  import rescuedriveraudittable from './common/rescueDriverAuditTable.vue'
  import { exportEmployeeInfo } from '@/api/exportApi';
  import {formatDate} from '@/utils/dateUtil';

  export default {
    components: {
      rescuedriveraudittable
    },
    data() {
      return {
        options: [
          {key: 0, value: '待审批'},
          {key: 2, value: '通过'},
          {key: 3, value: '拒绝'},
          {key: 1, value: '驳回修改'}
        ],
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        dialogFormVisible:false,
        tableSearchParam: {
          employeeName: '',
          telphone: '',
          auditBy: '',
          auditStatus: '',
        },
        dateRange:[],
        beginDate:'',
        endDate:''
      }
    },
    methods: {
      hideDialog(){
        this.dialogFormVisible = false
      },
      listTableData() {
        this.$refs.rescuedriveraudittable.listTableData(this.tableSearchParam, this.currentPage, this.pageSize)
      },
      handleDateChange(event){
        if(event && event.length===2){
          this.beginDate = formatDate(event[0],'yyyy-MM-dd 00:00:00');
          this.endDate = formatDate(event[1],'yyyy-MM-dd 23:59:59');
        }
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      getTotal(total) {
        this.total = total
      },
      exportInfo(){
        const queryParams = {
          beginDate:this.beginDate,
          endDate:this.endDate
        }
        exportEmployeeInfo(queryParams).then(response=>{
          if(!response.hasError){
            if(response.message){
              this.$message({
                type: 'info',
                message: response.message
              })
            }else{
              let exportUrl = response.result.exportUrl;
              window.open(process.env.BASE_API +exportUrl , '_blank')
            }
          }else{
            this.$message({
              type: 'error',
              message: '生成导出文件失败,请稍候再试!'
            })
          }
        })
        this.hideDialog();
      }

    }
  }
</script>
